<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表图示例</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
    <script th:src="@{/js/plugins/echarts/5.4.2/echarts.min.js}"></script>

    <link id="layuicss-layer" rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/plugins/layui/css/admin.css}" media="all">
    <style>
        a:link, a:visited {
            text-decoration: none; /*超链接无下划线*/
        }
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        .widget-header > .widget-caption {
            line-height: 30px;
        }

        .table1 tbody {
            display: block;
        }

        .table1 thead, .table1 tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .table > thead > tr > th {
            vertical-align: middle;
            padding: 0 4px;
        }
        tbody::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #DCDCDC;
            background-color: #F5F5F5;
        }
        tbody::-webkit-scrollbar {
            width: 8px;
            background-color: #F5F5F5;
        }
        tbody::-webkit-scrollbar-thumb {
            background-color: #DCDCDC;
        }
        .btn, .btn-default, .btn:focus, .btn-default:focus {
            color: #444 !important;
            background-color: #fff !important;
            border-color: #ccc !important;
        }
        .btn:hover, .btn-default:hover, .btn:active, .btn-default:active, .open > .btn.dropdown-toggle, .open > .btn-default.dropdown-toggle {
            background-color: #d9d9d9 !important;
            border-color: #d9d9d9 !important;
        }
        .table thead > tr > th {
            font-size: 12px;
        }
        .card-body {
            padding: 2rem 3rem;
        }
        .card-body-icon {
            position: absolute;
            top: 4.5rem;
            right: 37px;
            font-size: 5rem;
        }
        .text-white {
            color: #fff;
        }
        .row {
            margin: 1rem 0;
        }
        .btn-green {
            background-color: #637e93  !important;
            border-color: #637e93 ;
            color: #ffffff;
        }
        .btn-purple {
            background-color: #7e3794 !important;
            border-color: #7e3794;
            color: #ffffff;
        }
        .btn-blue {
            background-color: #5b8b94 !important;
            border-color: #5b8b94;
            color: #ffffff;
        }
        .btn-grey {
            background-color: #948065 !important;
            border-color: #948065;
            color: #ffffff;
        }
        .layui-hide{
            display: none;
        }
        .btn {
            padding: 3px 10px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .btn, .btn-default, .btn:focus, .btn-default:focus {
            color: #444 !important;
            background-color: #fff !important;
            border-color: #ccc !important;
        }

        .btn:hover, .btn-default:hover, .btn:active, .btn-default:active, .open > .btn.dropdown-toggle, .open > .btn-default.dropdown-toggle {
            background-color: #d9d9d9 !important;
            border-color: #d9d9d9 !important;
        }
    </style>
</head>

<body class="gray-bg" style="height: auto;">
<div class="">
    <div class="row">
        <input id="userType" name="userType" type="hidden" th:value="${userType}" />
        <div class="col-xs-12">
            <div class="row ">
                <div class="col-xs-3">
                    <a href="javascript:;">
                        <div class="card text-white btn-warning o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon">
                                    <i class="ace-icon glyphicon glyphicon-signal"></i>
                                </div>
                                <div class="mr-5" style="margin-bottom: 1rem;"><span style="font-size:20px;margin-right:10px;">电焊机设备数量 </span></div>
                                <h2 class="mr-5" id="event_count_1">
                                    <span id="companyDeviceCount" style="font-size:20px;" th:text="${device0Count}"></span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="javascript:;">
                        <div class="card text-white btn-purple o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon">
                                    <i class="ace-icon glyphicon glyphicon-signal"></i>
                                </div>
                                <div class="mr-5" style="margin-bottom: 1rem;"><span style="font-size:20px;margin-right:10px;">使用中的电焊机数量 </span></div>
                                <h2 class="mr-5" id="event_count_3">
                                    <span id="deviceUse1" style="font-size:20px;" th:text="${deviceUse0Count}"></span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="javascript:;">
                        <div class="card text-white btn-blue o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon">
                                    <i class="ace-icon glyphicon glyphicon-signal"></i>
                                </div>
                                <div class="mr-5" style="margin-bottom: 1rem;font-size:20px;margin-right:10px;">
                                    <span style="font-size:20px;margin-right:10px;">等离子设备数量 </span>
                                </div>
                                <h2 class="mr-5" id="event_count_2">
                                    <span id="deviceSelfCount" style="font-size:20px;"  th:text="${device1Count}"></span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
<!--                style="margin-top: 1rem"-->
                <div class="col-xs-3" >
                    <a href="javascript:;">
                        <div class="card text-white btn-grey o-hidden h-100">
                            <div class="card-body">
                                <div class="card-body-icon">
                                    <i class="ace-icon glyphicon glyphicon-signal"></i>
                                </div>
                                <div class="mr-5" style="margin-bottom: 1rem;font-size:20px;margin-right:10px;">
                                    <span style="font-size:20px;margin-right:10px;">使用中的等离子设备数量 </span>
                                </div>
                                <h2 class="mr-5" id="event_count_4">
                                    <span id="deviceUse0" style="font-size:20px;" th:text="${deviceUse1Count}"></span>
                                </h2>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
<!--        th:classappend="${user.roleId==1 || user.roleId==2 || user.roleId==13}  ? '' : 'layui-hide'"-->
        <div class="col-sm-6" id="yj_div" >
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备列表统计</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="town_chart" style="height: 40vh"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6" id="yj_device_div" >
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>制粒机温度统计</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="device_chart" style="height: 40vh"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<div th:include="@{include}::footer"></div>
<!--<script th:inline="javascript"> var ctx = [[@{/}]]; </script>-->
<!--<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>-->
<!--<script th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>-->

<!--<script type="text/javascript" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>-->
<!--<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>-->
<!--<script type="text/javascript" th:src="@{/js/plugins/layer/layer.js}"></script>-->
<!-- ECharts -->

<!-- 自定义js -->
<!--<script th:src="@{/js/content.js?v=1.0.0}"></script>-->
<!-- ECharts demo data -->
<script th:src="@{/js/appjs/main_group.js}"></script>
</body>
</html>
